<template>
    <div class="service-setting">
        <!-- Header -->
        <div class="ls-card">
            <el-alert
                title="温馨提示：人工客服方式点击客服显示客服二维码及联系电话等信息。"
                type="info"
                show-icon
                :closable="false"
            />
        </div>

        <!-- Content -->
        <!-- <div class="ls-card m-t-24">
            <div class="nr weight-500 m-b-20">基础设置</div>
            <el-form ref="list" :model="form" label-width="120px" size="small">
                <el-form-item label="客服方式">
                    <el-radio v-model="form.service_type" :label="1">人工客服</el-radio>
                    <el-radio v-model="form.service_type" :label="2">在线客服</el-radio>
                </el-form-item>
            </el-form>
        </div>-->

        <div class="ls-card m-t-24">
            <div class="nr weight-500 m-b-20">人工客服</div>
            <el-form ref="formRef" :model="form" label-width="120px" size="small">
                <el-form-item label="客服标题">
                    <el-input placeholder v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="服务时间">
                    <el-input placeholder v-model="form.business_time"></el-input>
                </el-form-item>
                <el-form-item label="客服电话">
                    <el-input type="number" placeholder v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item
                    label="客服二维码"
                    prop="qr_code"
                    :rules="[
                        {
                            required: true,
                            message: '请选择客服二维码',
                            trigger: ['blur', 'change']
                        }
                    ]"
                >
                    <material-select v-model="form.qr_code"></material-select>
                </el-form-item>
            </el-form>
        </div>

        <div class="ls-card m-t-24 m-b-60">
            <div class="nr weight-500 m-b-20">在线客服</div>
            <el-form ref="list" :model="form" label-width="120px" size="small">
                <el-form-item label="客服状态">
                    <div>
                        <el-radio v-model="form.status" :label="0">关闭</el-radio>
                        <el-radio v-model="form.status" :label="1">开启</el-radio>
                    </div>
                    <div class="muted">开启则优先进入在线客服页面，如果客服不在线则进入人工页面</div>
                </el-form-item>
            </el-form>
        </div>

        <!-- 底部保存或取消 -->
        <div class="bg-white ls-fixed-footer flex row-center">
            <div class="row-center flex">
                <el-button size="small" type="primary" @click="onSubmit">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { apiServiceGetConfig, apiServiceSetConfig } from '@/api/application/service'
import MaterialSelect from '@/components/material-select/index.vue'

@Component({
    components: {
        MaterialSelect
    }
})
export default class ServiceSetting extends Vue {
    form: any = {
        title: '',
        phone: '',
        qr_code: '',
        status: 0,
        business_time: ''
    }

    /** S Methods **/

    getServicegetConfig() {
        apiServiceGetConfig({}).then(res => {
            this.form = res
        })
    }

    onSubmit() {
        const refs = this.$refs.formRef as HTMLFormElement
        refs.validate((valid: boolean): any => {
            if (!valid) {
                return
            }
            // 请求发送
            apiServiceSetConfig({ ...this.form }).then(res => {
                this.getServicegetConfig()
            })
        })
    }

    /** E Methods **/

    /** Life Cycle **/
    created() {
        // 初始化数据
        this.getServicegetConfig()
    }
}
</script>

<style lang="scss" scoped></style>
